<template>
	<div class="ShopAccount">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>帮助中心</el-breadcrumb-item>
			<el-breadcrumb-item>公告管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow abnormal mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="goToAdd()" round size="mini">新增公告</el-button>
					</el-col>
					<el-col :span="22"> </el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="id" label="序号" width="50px" align="center">
							<template slot-scope="{ $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="公告标题" width="150px"> </el-table-column>
						<el-table-column prop="channel_name" label="应用" width="120px"> </el-table-column>
						<el-table-column prop="city_name" label="城市" width="80px"> </el-table-column>
						<el-table-column prop="work_type_name" label="用户类型" width="80px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.work_type_name + '' }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="position_name" label="位置" width="150px"> </el-table-column>
						<el-table-column prop="content" label="公告内容" width="250px"></el-table-column>
						<el-table-column prop="status" label="状态" width="100px">
							<template slot-scope="{ row }">
								<span class="text-success" v-if="row.status == '1'">启用</span>
								<span class="text-danger" v-if="row.status == '2'">停用</span>
							</template>
						</el-table-column>
						<el-table-column prop="last_operationer" label="操作人" width="80px"> </el-table-column>
						<el-table-column prop="last_time" label="操作时间" width="150px"></el-table-column>
						<el-table-column label="操作" min-width="100" fixed="right">
							<template slot-scope="{ row }">
								<el-link :underline="false" type="primary" @click="goToAdd(row)">修改</el-link>
								<el-link :underline="false" :type="row.status == '1' ? 'danger' : 'success'" @click="toChange(row)">{{
									row.status == '1' ? '停用' : '启用'
								}}</el-link>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchAnnouncementList, announcementDisable } from '@/api/banner.js'

export default {
	name: 'SupplierList',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			demandList: [],
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	created() {
		this.listData()
	},
	mounted() {},
	methods: {
		async listData() {
			try {
				let ret = await fetchAnnouncementList({
					pageSize: this.pageSizeNow,
					page: this.pageNum
				})
				if (ret.list) {
					// [1]启用 [2]禁用 [其他]异常
					ret.list.forEach(item => {
						if (item.status == 1) {
							item.status_tag = true
						} else if (item.status == 2) {
							item.status_tag = false
						}
					})
					this.demandList = ret.list
					this.total = ret.count
				} else {
					this.demandList = []
					this.total = 0
				}
			} catch (err) {
				console.log('err:', err)
			}
		},

		shearchBtn() {
			this.pageNum = 1
			this.listData()
		},
		goToAdd(row) {
			if (row) {
				this.$router.push({
					path: '/announcementAdd',
					query: {
						sn: row.sn
					}
				})
			} else {
				this.$router.push('/announcementAdd')
			}
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listData()
		},
		async toChange(row) {
			try {
				let message = row.status ? '确定要启用吗？' : '确定要关闭吗？'
				let ret = await this.$confirm(message, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)

				if (ret === 'confirm') {
					await announcementDisable({ sn: row.sn, status: row.status == 2 ? '1' : '2' })
					this.$message.success('设置成功！')
					this.listData()
				}
			} catch (err) {
				console.log('err:', err)
			}
		}
	}
}
</script>

<style scoped>
.top {
	display: flex;
	margin-bottom: 20px;
}
.box1 {
	margin-right: 30px;
}

.label-name {
	width: 100px;
	text-align: right;
	font-size: 12px;
	color: #888888;
	line-height: 34px;
	float: left;
}

.label-value {
	font-size: 14px;
	color: #353c48;
	line-height: 34px;
	padding-left: 10px;
	float: left;
}
.money {
	color: #d40505;
	margin-right: 20px;
}
.auditCentent_next {
	display: flex;
	margin-bottom: 10px;
}

.wrap-timeline {
	display: block;
	overflow: auto;
	margin-bottom: 20px;
}

.gys-style {
	font-size: 16px;
	text-align: center;
	background: #4fc5ca;
	padding: 10px 0;
	border-radius: 0px;
	color: #fff;
	position: relative;
	top: -30px;
	width: 500px;
	left: -20px;
}
</style>
<style>
.tableMaxBox .el-table th .el-checkbox__input {
	display: block;
}
</style>



// WEBPACK FOOTER //
// src/components/banner/Announcement.vue